<template>
  <div>
    <div v-if="!chartData.length" slot="empty" class="emptyBg">
      <el-empty :image-size="200"></el-empty>
    </div>
    <MyEcharts v-else :option="option" />
  </div>
</template>
<script>
import { openApiStatisticalDataQuerySzTotal } from "@/api/admin/data/data";
import Bus from "@/utils/bus.js";
export default {
  components: {
    MyEcharts: () => import("@/components/myEcharts/index.vue"),
  },
  data() {
    return {
      listQuery: {
        deptType: 1, //单位类型；1-校区，2-系，3-教研室
        selection: "", //是否精选课程，1-是，0-否
        sourceUnit: "", //单位
      },
      chartData: [],
      option: null,
      firstData: [],
    };
  },
  mounted() {
    this.getList();
    Bus.$on("sendSchoolId", (v) => {
      Object.assign(this.listQuery, v);
      this.getList();
    });
  },
  beforeDestroy() {
    Bus.$off("sendSchoolId");
  },
  methods: {
    getList() {
      openApiStatisticalDataQuerySzTotal(this.listQuery).then((res) => {
        let { data } = res.data;
        this.chartData = data;
        this.firstData = this.uniqueById(data.map((v) => v.level1));
        this.initEcharts(data);
      });
    },
    initEcharts(data) {
      let arr1 = [];
      for (var i = 0; i < data.length; i++) {
        let x = Math.floor(Math.random() * 100 + 2);
        let y = Math.floor(Math.random() * 100 + 10);
        let arr = [x, y, data[i]];
        arr1.push(arr);
      }
      // 散点图
      this.option = {
        legend: {
          top: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          formatter: function (param) {
            var value = param.value;
            return (
              '<div style="font-size: 14px;padding: 7px;margin-bottom: 2px">' +
              "思政元素：" +
              // value[2].level1.name +
              // " / " +
              value[2].level3.name +
              "<br>" +
              "引用次数：" +
              value[2].num +
              "</div>"
            );
          },
        },
        xAxis: {
          axisLabel: {
            show: false, //不显示坐标轴上的文字
          },
          splitLine: {
            show: false, //不显示网格线
          },
        },
        yAxis: {
          axisLabel: {
            show: false, //不显示坐标轴上的文字
          },
          splitLine: {
            show: false, //不显示网格线
          },
        },
        series: [
          {
            data: arr1,
            type: "scatter",
            symbolSize: function (data) {
              let num = parseInt(data[2].num) + 10;
              return num;
            },
            itemStyle: {
              color: (e) => {
                return this.setColor(e);
              },
            },
          },
        ],
      };
    },
    setColor(e) {
      let colors = ["#67C23A", "#E6A23C", "#F56C6C", "#409EFF", "#f40", "#f60"];
      let cur = e.value[2].level1;
      for (var i = 0; i < this.firstData.length; i++) {
        if (this.firstData[i].id == cur.id) {
          return colors[i];
        }
      }
    },
  },
};
</script>